Advanced Responsive Layouts with CSS Flexbox: Flexible Website Development Tool by Borten Mand-Hendriksen

Author:Borten Mand-Hendriksen [Mand-Hendriksen, Borten]
Language: eng
Format: azw3
Tags: Everything You Need to Know with CSS Flexbox
Publisher: BefittingLife.com
Published: 2018-11-22T16:00:00+00:00

Adding responsive breakpoints

As you saw in the previous movie, Flexbox allows you to create advanced grid patterns, like this card pattern you see here, really effectively and simply. The problem is, as I was applying this new code, I broke a cardinal rule of responsive web design: I did this without accounting for smaller screens. Because, as I have said before, you should always design and write your code mobile first. If I go to look at the browser tools here and display my page using an emulated iPhone 6, you will see what I am talking about.

We still have the three columns, even though we are on a really tiny screen. Because we have squished down the columns, you can see that the text is spanning outside of the boxes, and it looks like a big mess. What I need to do now is add in some media queries and some break points, so that my content is displaying properly across all different screen types. That starts with removing Flexbox from the smallest possible screen. Back in my code editor, I am going to grab all the code I have wrote in the previous movie in a media query.

@ Media screen and (min-width: and I will set this to 40ems. And then I will indent these things, and close my media query. Now I can save this and go and reload this page. What you will see is, on a small screen like the one we have here, we see the vertical stack with one item, then the next, and then the next, and everything works fine. Then, when I scale up to about 640 pixels, my media query kicks in and I now see my new layout in Flexbox.

The problem is, I am seeing three columns, but in this width, I should really only be seeing two columns. You can also see there is a bit of discrepancy between the spacing at the top here and the spacing on the side, and some other stuff. So, I am going to go and create a new media query. I will create a new media query that is going to account for the biggest possible screen, and that is where I want to display the 33% width. I will put in a new media query. Screen and (min-width: 60ems), and then I will grab this .card (flex: here, copy it, and paste it in, and then I will change the previous one, the one that is for 40ems, to 50% - 1em.

Save it; reload the page again. Now, you should see that, on small screens, we have the vertical stack with one item; on medium screens, we get two items; and then on widescreens, we get three items. Now we have a properly responsive display. Doing this, I also noticed there is a little too much space here, between the two items, when we are just displaying two. I can go in and change that by changing this calc value to .

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.